<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.0.6/swiper-bundle.min.css" rel="stylesheet">
</head>

<body class="dpflex fdc">
    <!-- 上面的内容区域 -->
    <main class="main flex1">
        <!--轮播开始 -->
        <div class="swiper">111111
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="../img/index-swiper-bg1.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../img/index-swiper-bg2.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../img/index-swiper-bg3.jpg" alt="">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

        </div>
        <!--轮播结束 -->
        <!-- 内容区域 -->
        <div class="content mt20">
            <!-- 排名和打卡 -->
            <div class="ranking-clock dpflex">
                <!-- 排名 -->
                <div class="ranking mr20 pl15 pt15" >
                    <h2 class="title">今日排名</h2>
                    <span class="rank-num" id="rankNum"></span>
                </div>
                <!-- 打卡 -->
                <div class="clock pl15 pt15">
                    <h2 class="title">累积打卡<span id="clockDay"></span>天</h2>
                    <div class="clock-btn" id="clockBtn">
                        今日打卡
                    </div>
                </div>
            </div>
            <!-- 运动数据和徽章 -->
            <div class="sport-data-badge dpflex mt20">
                <!-- 运动数据 -->
                <div class="sport-data mr20 pl15 pt15">
                    运动数据
                </div>
                <!-- 徽章 -->
                <div class="badge pl15 pt15">
                    <h2 class="title">累积运动徽章</h2>
                    <div class="num-box">
                        <span id="badgeNum" class="badge-num"></span>枚
                    </div>
                </div>
            </div>
            <!-- 课程训练 -->
            <div class="mt20 course-training pl15 pt15">

            </div>
             <!-- 课程训练 -->
             <div class="mt20 outdoor-running pl15 pt15">

            </div>
        </div>
        </div>
    </main>
    <!-- 底部导航区域 -->
    <footer class="footer" id="footer">
        
    </footer>
    <!-- 使用在线版的swiper -->
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.0.6/swiper-bundle.min.js"></script>
     <!-- 引入axios -->
     <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</body>

</html>